# 一种最常见的网站布局
# 页面从上到下,分成三个部分
	头部(header)
	躯干(body)
	尾部(footer)

# 其中躯干又水平分成三栏,从左到右为
	导航
	主栏
	副栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Index</title>
		<style type="text/css">
			.HolyGrail {
			  display: flex;
			  min-height: 100vh;
			  flex-direction: column;
			}
			
			header,
			footer {
			  flex: 1;
			}
			
			.HolyGrail-body {
			  display: flex;
			  flex: 1;
			}
			
			.HolyGrail-content {
			  flex: 1;
			}
			
			.HolyGrail-nav, .HolyGrail-ads {
			  /* 两个边栏的宽度设为12em */
			  flex: 0 0 12em;
			}
		</style>
	</head>
	<body class="HolyGrail">
		<header>头部</header>
		<div class="HolyGrail-body">
			<div class="HolyGrail-nav">导航</div>
			<div class="HolyGrail-content">主栏</div>
			<div class="HolyGrail-ads">副栏</div>
		</div>
		<footer>尾部</footer>
	</body>
</html>

# 如果是小屏幕,躯干的三栏自动变为垂直叠加

	@media (max-width: 768px) {
	  .HolyGrail-body {
		flex-direction: column;
		flex: 1;
	  }
	  .HolyGrail-nav,
	  .HolyGrail-ads,
	  .HolyGrail-content {
		flex: auto;
	  }
	}